<template>
    <div class="personalContainer">
      <el-image
        src="http://file.chat.navrise.com/file/demo/banner.png"
        style="height: 33.33rem"
        fit="cover"
      >

      </el-image>
      <div class="personalContent">
        <p class="titleH">原创内容团队</p>
        <p class="titleP">旭航新媒体版块人才储备雄厚</p>
        <div class="spanP">
          <span>由国内外资深广告人、中国作协成员、专业设计师以及资深媒体人、记者等80人组成的新媒体内容制作团队</span>
        </div>
        <div class="personals">
          <div class="personalImage">
            <el-image
              :src="personalImage"
            ></el-image>
          </div>
          <div class="personal personalOne thisLeft">
            <div class="details">
              <h6>邵立威先生</h6>
              <p class="detailsP">15年传媒工作经历。曾任杭州电视台广告营销部主任、新媒体中心总监；主导运营《生活像花儿一样》、《领我吃呀》等数10档电视节目</p>
            </div>
            <el-image
              :src="personalPersonal1"
            ></el-image>
          </div>
          <div class="circularY circularOne"></div>
          <div class="personal personalTwo thisRight">
            <el-image
              :src="personalPersonal2"
            ></el-image>
            <div class="details">
              <h6>顾晓女士</h6>
              <p class="detailsP">15年传媒工作经历 。曾任杭州经济广播电台副主任 ，资深广播电视节目制作人，曾主导运营多档广播电视节目。</p>
            </div>
          </div>
          <div class="circularY circularTwo"></div>
          <div class="personal personalThree thisLeft">
            <div class="details">
              <h6>张嵚先生</h6>
              <p class="detailsP">中国作家协会会员，《尼山书院》客座老师21年新闻媒体和影视编剧行业工作经验，在《读者欣赏》《历史讲坛》等刊物上发表作品</p>
            </div>
            <el-image
              :src="personalPersonal3"
            ></el-image>
          </div>
          <div class="circularY circularThree"></div>
          <div class="personal personalFour thisRight">
            <el-image
              :src="personalPersonal4"
            ></el-image>
            <div class="details">
              <h6>练熙聃先生</h6>
              <p class="detailsP">8年传媒工作经历 。曾任杭州电视台编导、 杭州电视台生活频道主持人，主导运营并主持了多档生活类电视节目。</p>
            </div>
          </div>
          <div class="circularY circularFour"></div>
        </div>
      </div>
    </div>
</template>

<script>
  // import personalBannerUrl from '@/assets/img/personal/banner.png'
  import personalImage from '@/assets/img/aboutUs/personal/center.png'
  import personalPersonal1 from '@/assets/img/aboutUs/personal/person1.png'
  import personalPersonal2 from '@/assets/img/aboutUs/personal/person2.png'
  import personalPersonal3 from '@/assets/img/aboutUs/personal/person3.png'
  import personalPersonal4 from '@/assets/img/aboutUs/personal/person4.png'
  export default {
    name: "personal",
    data(){
      return{
        // personalBannerUrl: personalBannerUrl,
        personalImage:personalImage,
        personalPersonal1:personalPersonal1,
        personalPersonal2:personalPersonal2,
        personalPersonal3:personalPersonal3,
        personalPersonal4:personalPersonal4,
      }
    }
  }
</script>

<style scoped lang="scss">
  .personalContainer {
    width: 100%;
    .personalContent{
      margin: 5rem 6.4166rem 20rem;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h6,p,span{
        margin: 0;
        /*font-family: 'fontNormal';*/
        /*font-weight: 300;*/
      }
      .titleH{
        font-size: 3rem;
        color: #333333;
      }
      .titleP{
        font-size: 1.66rem;
        color: #777777;
        margin: 2.66rem 0 2.33rem;
      }
      .spanP{
        width: 66.66rem;
        height: 4rem;
        background-color: #173d95;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1px;
        span{
          display: inline-block;
          font-size: 1.33rem;
          color: #ffffff;
        }
      }
      .personals{
        width: 100%;
        margin-top: 7.75rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .personalImage{
          width: 25rem;
          height: 25rem;
          border-radius: 100%;
          margin: 3.16rem 0;
          border: solid 1px #cdcdcd;
          display: flex;
          justify-content: center;
          align-items: center;
          .el-image{
            border-radius: 100%;
          }
        }
        .circularY{
          width: 1.33rem;
          height: 1.33rem;
          border-radius: 100%;
          background-color: #173d95;
          position: absolute;
        }
        .circularOne{
          left: 36rem;
          top: 4.6rem;
        }
        .circularTwo{
          right: 34rem;
          top: 6.34rem;
        }
        .circularThree{
          left: 34.8rem;
          bottom: 5.6rem;
        }
        .circularFour{
          right: 36rem;
          bottom: 4.6rem;
        }
        .personal{
          height: 7.833rem;
          position: absolute;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .details{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h6{
              font-size: 1.66rem;
              color: #333333;
            }
            .detailsP{
              font-size: 1.166rem;
              line-height: 1.5rem;
              color: #555555;
            }
          }
          .el-image{
            width: 7.0833rem;
            height: 7.833rem;
          }
        }
        .thisLeft{
          .details{
            align-items: flex-end;
            .detailsP{
              text-align: right;
            }
          }
        }
        .thisRight{
          .details{
            align-items: flex-start;
            .detailsP{
              text-align: left;
            }
          }
        }
        .personalOne{
          width: 33rem;
          top: 0;
          left: 0;
          .details{
            width: 23.75rem;
          }
        }
        .personalTwo{
          width: 29.5833rem;
          right: 0;
          top: 5rem;
           .details{
             width: 20.4166rem;
           }
         }
        .personalThree{
          width: 32.833rem;
          left: 0;
          bottom: 0;
          .details{
            width: 23.66rem;
          }
        }
        .personalFour{
          width: 30.58rem;
          right: 2rem;
          bottom: -1rem;
          .details{
            width: 21.4166rem;
          }
        }
      }
    }
  }
</style>
